<template>
  <section class="right-side">
    <div class="right-title">
      {{ parent && parent.meta&& parent.meta.title }}
    </div>
    <ul class="right-side-menu">
      <li v-for="item in filterMenu(parent.children) || []" :key="item.path" class="menu-li">
        <div class="menu-title">
          <span class="material-icons title-icon">keyboard_arrow_down</span>
          {{ item.meta.title }}
        </div>
        <ul class="sub-menu-ul">
          <li class="sub-menu-item" :class="{active: leaf.path===activeMenu}" v-for="leaf in filterMenu(item.children)" :key="leaf.path">
            <router-link :to="leaf.path" class="menu-item-inner">
              <span>{{ leaf.meta.title }}</span>
            </router-link>
          </li>
        </ul>
      </li>
    </ul>

  </section>
</template>

<script>
  export default {
    name: 'RightSide',
    props: {
      activeIndex: {
        type: Number,
        default: 0
      },
      parent: {
        type: Object,
        default: () => {
          return {
            children: []
          }
        }
      }
    },
    computed: {
      activeMenu () {
        const route = this.$route
        const { meta, path } = route
        // if set path, the sidebar will highlight the path you set
        // 如果有设置显示菜单，则使用显示菜单的值
        if (meta.menu) {
          return meta.menu
        }
        return path
      },
      defaultOpenKeys () {
        if (this.parent.children.length) {
          return this.parent.children.map(item => item.path)
        }
        return []
      }
    },
    methods: {
      filterMenu (menu) {
        if (!menu) {
          return []
        }
        return menu.filter(item => !item.hidden)
      }
    }
  }
</script>

<style lang="less">

  .right-side::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .right-side {
    padding-top: 64px;
    width: 120px;
    height: 100vh;
    overflow: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    background: white;
    border-right: 1px #E5E5E5 solid;

    .right-title {
      position: fixed;
      top: 0;
      left: 120px;
      width: 120px;
      height: 64px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #262626;
      border-bottom: 1px #E5E5E5 solid;
      border-right: 1px #E5E5E5 solid;
      background: white;
      font-size: 16px;
      z-index: 90;
    }

    .right-side-menu {
      padding: 10px;

    }

    .menu-title {
      position: relative;
      padding: 10px 0 10px 24px;
      height: 50px;
      display: flex;
      align-items: center;
      color: #333333;
      font-size: 15px;
      .title-icon {
        position: absolute;
        top: 13px;
        left: 0;
        color: #8C8C8C;
      }
    }
    .menu-li {
      position: relative;
      padding-bottom: 10px;
      &::after {
        position: absolute;
        content: '';
        left: 24px;
        bottom: 0;
        width: 74px;
        height: 1px;
        background:  rgba(217, 217, 217, 100);
      }
    }
    .sub-menu-ul {
      padding: 0;
    }

    .sub-menu-item {
      margin: 4px 0;
      width: 100%;
      padding-left: 24px;
      height: 30px;
      display: flex;
      align-items: center;
      border-radius: 4px;
      transition: 0.1s;
      a {
        color: rgba(89, 89, 89, 100);
      }
      &:not(.active) a:hover {
        color: rgba(36, 147, 252, 100);
      }
      &.active {
        color: rgba(89, 89, 89, 100) !important;
        background: rgba(235, 237, 240, 100);
      }

    }

    .r-menu {
      /*padding: 0 10px;*/
    }

    .r-menu-item {
      font-size: 16px;
      color: #333333;

    }

    .x-menu-title {
      font-size: 14px;
      color: #8c8c8c;
    }

    // 增加下划线
    .ant-menu-submenu {
      position: relative;

      &:after {
        position: absolute;
        left: 15%;
        content: "";
        width: 70%;
        height: 1px;
        background: #D9D9D9;
      }
    }
  }
</style>
